<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import banner1 from '@/assets/home/banner1.jpg'
import banner2 from '@/assets/home/banner2.jpg'
import banner3 from '@/assets/home/banner3.jpg'
const images: Ref<Array<string>> = ref([
    banner1,
    banner2,
    banner3
])
const searchtext = ref('')
import { getCourseList, getCategoryList, gethotCategoryList, gethotCourseList, gethotTeacherList } from '../../api/user'
const courseList: any = ref([])
const categoryList: any = ref([])
const hotCategoryList: any = ref([])
const hotCourseList: any = ref([])
const hotTeacherList: any = ref([])
onMounted(() => {
    getCourseList({}).then(res => {
        // console.log(21, res.data.courseList);
        courseList.value = res.data.courseList
    })
    getCategoryList({}).then(res => {
        // console.log(22, res.data.categoryList);
        categoryList.value = res.data.categoryList
    })
    gethotCategoryList({}).then(res => {
        // console.log(222, res.data.hotCategoryList);
        hotCategoryList.value = res.data.hotCategoryList
    })
    gethotCourseList({}).then(res => {
        console.log(2222, res.data.hotCourseList.slice(0, 2));
        hotCourseList.value = res.data.hotCourseList.slice(0, 2)
    })
    gethotTeacherList({}).then(res => {
        // console.log(22222, res.data.hotTeacherList);
        hotTeacherList.value = res.data.hotTeacherList
    })
})
//导入person1 2
import personBg from '../../assets/home/category/personBg.png'
import homeFooterCom from '../../components/homeFooterCom.vue'
</script>
<template>
    <section v-if="$route.path == '/home'">
        <div class="content">
            <header>
                <van-nav-bar title="首页" />
            </header>
            <main>
                <!-- 用户信息 -->
                <!-- <p>{{ }}</p> -->
                <!-- 关键字搜索 -->
                <section>
                    <van-field @click="$router.push('/search')" v-model="searchtext" placeholder="请输入关键字搜索"
                        style="background-color: #f7f7f7;width: 80vw;" />
                    <div class='search'>
                        <img src="../../assets/home/搜索.png" alt="">
                    </div>
                </section>
                <!-- 轮播图 -->
                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in images" :key="image">
                        <img :src="image" style="width: 90vw;height: 40vw;border-radius: 5px;" />
                    </van-swipe-item>
                </van-swipe>
                <!-- 分类 -->
                <van-grid :column-num="4">
                    <van-grid-item v-for="value in categoryList" :key="value" :icon="value.categoryImg"
                        :text="value.categoryTitle" style="user-select: none;" 
                        @click="$router.push('/home/courseListView')" />
                </van-grid>
                <!-- 热门类别 -->
                <van-cell title="热门类别" value="查看更多" @click="$router.push('/home/courseListView')" />
                <div class="hot_category br">
                    <div v-for="value in hotCategoryList" :key="value" class="hot_category">
                        <img :src="value.categoryImg" alt="">
                        <span>{{ value.categoryTitle }}</span>
                    </div>

                </div>
                <!-- 热门课程 -->
                <van-cell title="热门课程" value="查看更多" @click="$router.push('/home/coursedetalCourse')" />
                <div class="hot_course">
                    <div @click="$router.push(`/home/summary/${value.id}`)" v-for="value in hotCourseList" :key="value"
                        class="flex_hot_course br" v-lazy="value" >
                        <!-- <div @click="$router.push('/home/summary')" v-for="value in hotCourseList" :key="value"
                        class="flex_hot_course"> -->
                        <img :src="value.courseImg" alt="">
                        <span class="p1">{{ value.courseTitle }}</span>
                        <p>{{ value.courseteacher }}</p>
                        <p style="display: flex;justify-content: space-between; align-items: baseline;  width: 92%;">
                        <div class="left" style="display: flex;align-items: baseline;">
                            {{ value.grade }}&nbsp;&nbsp;
                            <!-- 渲染红色的星星 -->
                            <span v-for="n in value.stars" :key="n" style="color: gold; font-size: 0.16rem;">★</span>
                        </div>
                        <div class="right">
                            {{ '(' + value.playercount + ')' }}
                        </div>
                        </p>
                    </div>

                </div>
                <!--热门老师  -->
                <van-cell title="热门老师" value="查看更多" @click="$router.push('/home/teacherListView')" />
                <div class="hotteacher">
                    <div v-for="item in hotTeacherList" :key="item" v-lazy="item" class="br">
                        <img :src='personBg' alt="" class="personBg">
                        <img :src="item.personImg" alt="" class="person1">
                        <p style="font-size: 0.14rem;padding: 4px 0;">{{ item.courseteacher }}</p>
                        <p>{{ item.professional }}</p>
                    </div>

                </div>
                <!-- 别人都在学 -->
                <van-cell title="别人都在学" value="查看更多" @click="$router.push('/home/courseListView')" />
                <div class="hot_course">
                    <div v-for="value in hotCourseList" :key="value" class="flex_hot_course br" v-lazy="value">
                        <img :src="value.courseImg" alt="">
                        <span class="p1">{{ value.courseTitle }}</span>
                        <p>{{ value.courseteacher }}</p>
                        <p style="display: flex;justify-content: space-between; align-items: baseline;  width: 92%;">
                        <div class="left" style="display: flex;align-items: baseline;">
                            {{ value.grade }}&nbsp;&nbsp;
                            <!-- 渲染红色的星星 -->
                            <span v-for="n in value.stars" :key="n" style="color: gold; font-size: 0.16rem;">★</span>
                        </div>
                        <div class="right">
                            {{ '(' + value.playercount + ')' }}
                        </div>
                        </p>
                    </div>

                </div>
            </main>
        </div>
        <homeFooterCom></homeFooterCom>
    </section>

    <router-view v-else></router-view>
</template>
<style lang="scss" scoped>
/* section {
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
} */
.br{
    border-radius: 5px;
}
.content {
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    box-sizing: border-box;

    header {
        height: 50px;
        width: 100vw;
    }

    main {
        flex: 1;
        padding: 0 5vw;
        overflow: auto;

        section {
            display: flex;
            margin-bottom: 6vw
        }

        .search {
            background-color: #f7f7f7;
            width: 10vw;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                background-size: cover;
                width: 0.2rem;
                border: none;
            }
        }

        .hot_category {
            width: 100%;
            height: 126px;
            display: flex;
            flex-direction: row;
            position: relative;
            box-sizing: border-box;
            justify-content: space-between;

            img {
                display: flex;
                flex-direction: column;
                width: 92%;
                height: 114px;
                position: relative;
            }

            span {
                position: absolute;
                bottom: 14px;
                left: 30%;
                z-index: 99;
                color: #fff;
                font-weight: bold;
            }

        }

        .hot_course {
            width: 100%;
            height: 2.2rem;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;

            img {
                display: flex;
                flex-direction: column;
                width: 92%;
                height: 1.8rem;


            }

            .flex_hot_course {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;

                // align-items: center;
                span {
                    width: 92%;
                    text-align: left;
                    // width: 1.6884rem;
                    height: 0.4rem;
                    word-wrap: break-word;
                    font-size: 0.14rem;
                    padding: 4px 0
                }
            }
        }

        .van-cell {
            font-size: 0.16rem;
        }

        .hotteacher {
            width: 100%;
            display: flex;
            height: 230px;
        }

        .hotteacher>div {
            padding-top: 80px;
            display: flex;
            flex: 1;
            flex-direction: column;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .hotteacher>div .personBg {
            position: relative;
            width: 92%;
            height: 100px;
        }

        .person1 {
            position: absolute;
            width: 70%;
            bottom: 130px;
            left: 20px;
        }
    }

}


footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // width: 100vw;
    height: 50px;
    border-top: 1px solid #ccc;

    div {
        flex: 1;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        img {
            width: 6vw;
            height: 6vw;

        }

        span {
            display: none;
        }

        .active {
            display: block;

            img {
                border-radius: 50%;
                width: 6vw;
                height: 6vw;
                background-color: blue;
            }
        }


    }

}
</style>